<template>
  <div class="app-container">
    <!-- 分页查询 -->
    <el-form
      ref="queryParams"
      :model="queryParams"
      size="small"
      label-suffix=":"
      label-width="150px"
    >
      <el-row :gutter="10">
        <el-col :span="1.5">
          <el-form-item :label="$t('depotLang.depot')" prop="depotId">
            <el-select
              v-model="queryParams.depotId"
              :placeholder="$t('pleaseSelect')"
              clearable
              style="width: 200px"
            >
              <el-option
                v-for="item in depotOptionList"
                :key="item.value"
                :value="item.value"
                :label="item.title"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="1.5">
          <el-form-item :label="$t('goodsSKULang.skuCode')" prop="skuCode">
            <el-input
              v-model.trim="queryParams.skuCode"
              :placeholder="$t('pleaseEnter')"
              style="width: 200px"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item
            :label="$t('goodsSKULang.productCategory')"
            prop="categoryId"
          >
            <el-cascader
              v-model="queryParams.categoryId"
              :options="categoryAllList"
              :props="{
                label: 'categoryName',
                value: 'categoryId',
                children: 'children',
              }"
              style="width: 60%"
              @change="handleChange"
            />
          </el-form-item>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="primary"
            size="small"
            icon="el-icon-search"
            @click="handleQuery"
          >
            {{ $t("query") }}
          </el-button>
          <el-button
            type="primary"
            size="small"
            icon="el-icon-refresh-left"
            @click="handleReset"
          >
            {{ $t("reset") }}
          </el-button>
        </el-col>
      </el-row>
    </el-form>
    <!-- 数据列表 -->
    <el-table
      ref="table"
      v-loading="loading"
      :data="tableData"
      border
      class="mt-10"
    >
      <!-- <el-table-column type="selection" width="55" /> -->
      <el-table-column
        :label="$t('tableIndex')"
        type="index"
        align="center"
        width="80"
      />
      <el-table-column
        :label="$t('goodsSKULang.depotCodeAndName')"
        prop="depotCodeAndName"
        align="center"
        min-width="120"
      />
      <el-table-column
        :label="$t('goodsSKULang.customerCodeAndName')"
        prop="customerCodeAndName"
        align="center"
        min-width="160"
      />
      <el-table-column
        :label="$t('goodsSKULang.skuCode')"
        prop="skuCode"
        align="center"
        min-width="100"
      />
      <el-table-column
        :label="$t('goodsSKULang.goodsName')"
        prop="goodsName"
        align="center"
        min-width="120"
      />
      <el-table-column
        :label="$t('inventoryLang.declaredValue') + 'USD'"
        prop="declaredUsdPrice"
        align="center"
        min-width="80"
      />
      <el-table-column
        :label="$t('statusLang.inTransit')"
        prop="inTransitNum"
        align="center"
        min-width="160"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            :disabled="scope.row.inTransitNum === 0 ? true : false"
            @click="getInTransitStockList(scope.row)"
          >{{ scope.row.inTransitNum }}</el-button>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('statusLang.inLibrary')"
        prop="inStockNum"
        align="center"
        min-width="80"
      />
      <el-table-column
        :label="$t('statusLang.availableForSale')"
        prop="canSellNum"
        align="center"
        min-width="80"
      />
      <el-table-column
        :label="$t('statusLang.packaged')"
        prop="packagedNum"
        align="center"
        min-width="80"
      />
      <el-table-column
        :label="$t('regionLang.badProduct')"
        prop="defectiveProductNum"
        align="center"
        min-width="120"
      />
      <el-table-column
        :label="$t('regionLang.staging')"
        prop="stagingNum"
        align="center"
        min-width="120"
      />
      <el-table-column
        :label="$t('operation')"
        align="center"
        min-width="120"
        fixed="right"
      >
        <template slot-scope="scope">
          <el-button type="text" @click="handleDetail(scope.row)">
            {{ $t("inventoryLang.inventoryDetails") }}
          </el-button>
          <el-button type="text" @click="handleAdjust(scope.row)">
            {{ $t("inventoryLang.inventoryTransfer") }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 页码 -->
    <el-row type="flex" justify="end" align="middle" style="height: 60px">
      <el-pagination
        :total="total"
        layoout="total,prev,pager,next"
        :current-page="queryParams.pageNo"
        :page-size="queryParams.pageSize"
        @current-change="pageNoChange"
      />
    </el-row>
    <!-- 详情 -->
    <!-- <info-form
      :infoParams="infoParams"
      :visible.sync="detailDialog"
      :operation="operation"
      @close="infoClose"
    /> -->
    <!--  在途库存 -->
    <el-dialog
      :title="$t('statusLang.inTransit') + $t('goodsSKULang.inventory')"
      :visible.sync="dialog"
      width="80%"
    >
      <el-table
        ref="form"
        v-loading="loading"
        :data="data"
        border
        class="mt-10"
      >
        <el-table-column
          :label="$t('tableIndex')"
          type="index"
          align="center"
          width="80"
        />
        <el-table-column
          :label="$t('inventoryLang.receiptDocument')"
          prop="orderNo"
          align="center"
          min-width="120"
        />
        <el-table-column
          :label="$t('statusLang.status')"
          prop="orderStatus"
          align="center"
          min-width="160"
        >
          <template slot-scope="scope">
            {{
              $t(
                "statusLang." +
                  getTitleByValue(deliveryStatusOptions, scope.row.orderStatus)
              )
            }}
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('goodsSKULang.skuCode')"
          prop="skuCode"
          align="center"
          min-width="120"
        />
        <el-table-column
          :label="$t('depotLang.depot')"
          prop="depotCodeAndName"
          align="center"
          min-width="120"
        />
        <el-table-column
          :label="$t('goodsSKULang.forecastQuantity')"
          prop="preSkuNum"
          align="center"
          min-width="160"
        />
        <el-table-column
          :label="$t('warehousingLang.receiptQuantity')"
          prop="receiptNum"
          align="center"
          min-width="120"
        />
        <el-table-column
          :label="$t('orderDate')"
          prop="orderCreatedDate"
          align="center"
          min-width="120"
        />
      </el-table>
      <div style="margin-top: 20px">
        <el-row type="flex" justify="center">
          <el-button type="warning" plain @click="close">{{
            $t("close")
          }}</el-button>
        </el-row>
      </div>
    </el-dialog>
    <!-- 调库存 -->
    <el-dialog
      :visible.sync="adjustDialog"
      :title="$t('inventoryLang.inventoryTransfer')"
      width="580px"
    >
      <el-form
        ref="adjustForm"
        :model="adjustForm"
        size="small"
        :rules="rules"
        label-suffix=":"
        label-width="100px"
      >
        <el-form-item :label="$t('managmentLang.number')" prop="batchNo">
          <el-input
            v-model="adjustForm.batchNo"
            placeholder="请输入单号/盘点单单号,销毁单号"
          />
        </el-form-item>
        <el-form-item :label="$t('managmentLang.type')" prop="bizType">
          <el-select
            v-model="adjustForm.bizType"
            placeholder="请选择"
            style="width: 100%"
          >
            <el-option
              v-for="item in adjustStockTypeOptions"
              :key="item.value"
              :value="item.value"
              :label="$t('statusLang.' + item.title)"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          :label="$t('managmentLang.operationRemarks')"
          prop="remark"
        >
          <el-input v-model="adjustForm.remark" placeholder="请输入" />
        </el-form-item>
      </el-form>
      <el-row type="flex" justify="end">
        <el-button type="warning" plain szie="midumn" @click="cancel">{{
          $t("cancel")
        }}</el-button>
        <el-button type="primary" szie="midumn" @click="handleSubmit">{{
          $t("confirm")
        }}</el-button>
      </el-row>
    </el-dialog>
    <!-- 库存明细-->
    <el-dialog :visible.sync="detailDialog" width="80%">
      <el-form ref="detailRef" :model="detailDataForm">
        <el-descriptions
          class="margin-top"
          :column="3"
          style="width: 85%; margin: 0 auto; padding-bottom: 30px"
        >
          <el-descriptions-item>
            <template slot="label">
              {{ this.$t("goodsSKULang.skuCode") }}
            </template>
            {{ detailDataForm.skuCode }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              {{ this.$t("depotLang.depot") }}
            </template>
            {{ detailDataForm.depotCodeAndName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> {{ this.$t("createDate") }} </template>
            {{ detailDataForm.createdDate }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              {{ this.$t("goodsSKULang.goodsName") }}
            </template>
            {{ detailDataForm.goodsName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              {{ this.$t("goodsSKULang.customer") }}
            </template>
            {{ detailDataForm.customerCodeAndName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              {{ this.$t("gmtModified") }}
            </template>
            {{ detailDataForm.modifiedDate }}
          </el-descriptions-item>
        </el-descriptions>
      </el-form>
      <el-table
        ref="table"
        :data="detailData"
        border
        class="mt-10"
        :header-cell-style="{ background: '#f4f3f9', color: '#606266' }"
      >
        <el-table-column
          :label="$t('goodsSKULang.dateInfo')"
          prop="modifiedDate"
          align="center"
          min-width="100"
        />
        <el-table-column
          :label="$t('managmentLang.number')"
          prop="orderNo"
          align="center"
          min-width="100"
        />
        <el-table-column
          :label="$t('managmentLang.type')"
          prop="bizType"
          align="center"
          min-width="100"
        >
          <template slot-scope="scope">
            <span>{{
              $t(
                "statusLang." +
                  getTitleByValue(adjustStockTypeOptions, scope.row.bizType)
              )
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('number')"
          prop="operationNum,operationType"
          align="center"
          min-width="100"
        >
          <template slot-scope="scope">
            <div v-if="scope.row.bizType === adjustStockTypeDict.RECEIPT.value">
              <span
                style="color: #f6a233; font-size: 15px"
              >{{ scope.row.operationType === 0 ? "+" : "-"
              }}{{ scope.row.operationNum }}</span>
            </div>
            <div
              v-else-if="
                scope.row.bizType === adjustStockTypeDict.OUTBOUND.value
              "
            >
              <span
                style="color: #f59a23; font-size: 15px"
              >{{ scope.row.operationType === 0 ? "+" : "-"
              }}{{ scope.row.operationNum }}</span>
            </div>
            <div
              v-else-if="
                scope.row.bizType ===
                  adjustStockTypeDict.TRANSFER_LIBRARY_POSITION.value
              "
            >
              <span
                style="color: #e23f53; font-size: 15px"
              >{{ scope.row.operationType === 0 ? "+" : "-"
              }}{{ scope.row.operationNum }}</span>
            </div>
            <div
              v-else-if="
                scope.row.bizType ===
                  adjustStockTypeDict.INVENTORY_TRANSFER.value
              "
            >
              <span
                style="color: #23c733; font-size: 15px"
              >{{ scope.row.operationType === 0 ? "+" : "-"
              }}{{ scope.row.operationNum }}</span>
            </div>
            <div
              v-else-if="
                scope.row.bizType === adjustStockTypeDict.DISK_SURPLUS.value
              "
            >
              <span
                style="color: #f6a233; font-size: 15px"
              >{{ scope.row.operationType === 0 ? "+" : "-"
              }}{{ scope.row.operationNum }}</span>
            </div>
            <div
              v-else-if="
                scope.row.bizType === adjustStockTypeDict.INVENTORY_LOSS.value
              "
            >
              <span
                style="color: #f6a233; font-size: 15px"
              >{{ scope.row.operationType === 0 ? "+" : "-"
              }}{{ scope.row.operationNum }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('managmentLang.remainingStock')"
          prop="freeStock"
          align="center"
          min-width="80"
        />
        <el-table-column
          :label="$t('managmentLang.operationRemarks')"
          prop="remark"
          align="center"
          min-width="160"
        />
        <el-table-column
          :label="$t('goodsSKULang.operator')"
          prop="operator"
          align="center"
          min-width="150"
        />
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import to from 'await-to-js'
// import InfoForm from '../components/inventoryDetail.vue'
import { getAllCategoryList } from '@/api/system/category'
import { getDepotListAllStatus } from '@/api/business/depotManage/depot'
import { deliveryStatusDict, adjustStockTypeDict } from '@/utils/dictData'
import { getTitleByValue, getDictOptionList } from '@/utils/dictUtils'
import {
  getStockForOmsPageList,
  getInTransitStockList,
  omsAdjustStock,
  getStockDetailList
} from '@/api/system/OMS Inventory/managent'
export default {
  name: '',
  // components: { InfoForm },
  data() {
    return {
      loading: false,
      total: 0,
      categoryAllList: [], // 品类
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        categoryId: null, // 最低等级的种类id
        customerId: null,
        depotId: null,
        goodsName: null,
        skuCode: null
      },
      adjustForm: {
        batchNo: null,
        bizType: null,
        remark: null
      }, // 调库存
      detailDataForm: {}, // 详情
      tableData: [],
      data: [],
      detailData: [], // 详情
      dialog: false,
      adjustDialog: false,
      detailDialog: false,
      getTitleByValue: getTitleByValue,
      adjustStockTypeDict: adjustStockTypeDict,
      adjustStockTypeOptions: getDictOptionList(adjustStockTypeDict), // 调整库存类型
      deliveryStatusOptions: getDictOptionList(deliveryStatusDict), // 状态
      depotOptionList: [], // 仓库下拉
      customerOptionList: [], // 客户名称下拉
      rules: {
        batchNo: {
          required: true,
          message: this.$t('pleaseEnter'),
          trigger: 'blur'
        },
        bizType: {
          required: true,
          message: this.$t('pleaseSelect'),
          trigger: 'change'
        },
        remark: {
          required: true,
          message: this.$t('pleaseEnter'),
          trigger: 'blur'
        }
      }
    }
  },

  created() {
    this.getDepotOptionList()
    this.getAllCategoryList()
    this.getStockForOmsPageList()
  },
  methods: {
    // 查询
    handleQuery() {
      this.loading = true
      this.queryParams.pageNo = 1
      this.getStockForOmsPageList()
      this.loading = false
    },
    // 品类
    async getAllCategoryList() {
      const { data } = await getAllCategoryList()
      console.log(data, '品类')
      this.categoryAllList = data.categoryIdAndNameDTOList
    },
    handleChange(value) {
      console.log(value)
      this.queryParams.categoryId = value[2]
    },
    // 获取仓库下拉
    async getDepotOptionList() {
      const res = await getDepotListAllStatus()
      if (!res) return
      this.depotOptionList = res.data || []
    },
    // 获取OMS库存列表
    async getStockForOmsPageList() {
      const { data } = await getStockForOmsPageList({
        ...this.queryParams
      })
      console.log(data, '分页查询')
      this.tableData = data.stockPageInfoDTOList
      this.total = data.totalRowNum
    },
    // 在途库存
    async getInTransitStockList(row) {
      this.dialog = true
      const { data } = await getInTransitStockList({
        skuId: row.skuId,
        customerId: row.customerId
      })
      console.log(data, '在途库存')
      this.data = data.inTransitDTOList
    },
    // 调库存
    async handleAdjust() {
      this.adjustDialog = true
    },
    //  库存明细
    async handleDetail(row) {
      this.detailDialog = true
      const res = await getStockDetailList({
        skuId: row.skuId,
        customerId: row.customerId,
        depotId: row.depotId
      })
      if (!res || res.data === null) return
      this.detailDataForm = res.data
      this.detailData = res.data.detailDTOList
      console.log(res.data, '回显')
    },
    pageNoChange(newPage) {
      this.queryParams.pageNo = newPage
      this.getStockForOmsPageList()
    },
    async handleReset() {
      await this.$refs.queryParams.resetFields()
    },
    cancel() {
      this.adjustDialog = false
    },
    async handleSubmit() {
      const [err] = await to(this.$refs.adjustForm.validate())
      if (err === null) {
        const res = await omsAdjustStock({
          batchNo: this.adjustForm.batchNo,
          bizType: this.adjustForm.bizType,
          remark: this.adjustForm.remark
        })
        console.log(res, '调库存')
        // if (res && res.returnCode === 10000) {
        this.$message({
          message: this.$t('handleSuccess'),
          type: 'success'
        })
        this.adjustDialog = false
        this.getStockForOmsPageList()
        // }
      }
    },
    close() {
      this.dialog = false
    },
    infoClose() {
      this.operation = null
      this.detailDialog = false
    }
  }
}
</script>

<style>
.el-descriptions-item__label:not(.is-bordered-label) {
  margin-bottom: 5px;
}
</style>
